import Router from "vue-router";
import Vue from "vue";

// 把vue-router安装到Vue里。只有这样，Vue里才能使用vue-router里的组件，方法，属性等等。
Vue.use(Router);

// 引入页面级的组件。
// import Home from "@/views/Home.vue";
// import ShoppingCar from "@/views/ShoppingCar.vue"

// import Reg from "@/views/Reg.vue"

const Reg = ()=>import(/* webpackChunkName: 'demot' */ "@/views/Reg.vue");

// import Login from "@/views/Login.vue"
const Login = ()=>import(/* webpackChunkName: 'demot' */ "@/views/Login.vue");

import GoodsDetail from "@/views/GoodsDetail.vue"
import My from "@/views/My.vue"
import Category from "@/views/Category";
import Phone from "@/views/Category/Phone";
import MouthRed from "@/views/Category/MouthRed";
import NotFound from "@/views/NotFound.vue"


let router = new Router({
    mode:"hash",
    // 路由配置：路径和组件的对应关系
    routes:[
        {
            path:"/",
            redirect:"/home"
        },
        {
            path:"/home",
            // component:Home
            component:resolve=>require(["@/views/Home.vue"],resolve)//把Home.vue单独放在一个文件里。
        },
        {
            name:"ShoppingCar",
            path:"/ShoppingCar",
            // component:ShoppingCar,
            component:resolve=>require(["@/views/ShoppingCar.vue"],resolve),
            meta:{
                requireAuth:true
            },
            // 路由独享守卫
            // beforeEnter:(to,from,next)=>{
            //     if(!sessionStorage.getItem("username")){
            //         next("/Login?path="+to.path);
            //     }else{
            //         next();
            //     }
            // }
        },
        {
            name:"Reg",
            path:"/Reg",
            // component:Reg,
            components:()=>import(/* webpackChunkName: 'demot' */ "@/views/Reg.vue")
        },
        {
            name:"Login",
            path:"/Login",
            // component:Login,
            components:()=>import(/* webpackChunkName: 'demot' */ "@/views/Login.vue")
        },
        {
            name:"GoodsDetail",
            path:"/GoodsDetail/:proid",
            component:GoodsDetail,
            props:true
        },
        {
            name:"My",
            path:"/My",
            component:My,            
            meta:{
                requireAuth:true
            }
        },
        {
            name:"Category",
            path:"/Category",
            component:Category,
            children:[
                {
                    path:"Phone",
                    component:Phone
                },
                {
                    path:"MouthRed",
                    component:MouthRed
                }
            ],            
            meta:{
                requireAuth:true
            }
        },    
        {
            path:"*",
            component:NotFound
        }
    ]
});

// 全局守卫：任何路径的变化，都会执行全局守卫。既就是：只要进行路由匹配，那么就会调用全局守卫的钩子函数
// 前置
router.beforeEach((to,from,next)=>{
    console.log("全局前置守卫");
    console.log("to",to);//要去的路径信息（和this.$route是一样的类型）
    console.log("from",from);//从哪儿来。（和this.$route是一样的类型）
    // next();//下一步去哪儿，next()继续前行；next("/Login"):去登录页面。next()和this.$router.push()一样

    // if(to.path=="/ShoppingCar" || to.path=="/Category" || to.path=="/My"){
    if(to.meta.requireAuth){
        // if(没有登录){
        //     去登录页面
        // }
        if(!sessionStorage.getItem("username")){
            next("/Login?path="+to.path);
        }else{
            next();
        }
    }
    next();
})


// // 后置
// router.afterEach((to,from)=>{
//     console.log("全局后置守卫");

// })

export default router;